<template>
  <div class="p">
    <div ref="webgl" class="canvas">
    </div>
    <div class="aside animate__animated animate__fadeInRight">
      <button @click="back" class="back-button"></button>
      <button @click="split1" class="spilit1-button"></button>
      <button @click="restore" class="restore-button"></button>
    </div>
    <div class="footer ">
      <div class="footer-container animate__animated animate__fadeInUp" v-if="showfooter">
        <Transition enter-active-class="animate__animated animate__fadeInUp"
          leave-active-class="animate__animated animate__fadeOutDown">
          <div v-if="showbox" class="BoxVisible"></div>
        </Transition>
        <Transition enter-active-class="animate__animated animate__fadeInUp"
          leave-active-class="animate__animated animate__fadeOutDown">
          <div v-if="showbluetooth" class="bluetoothVisible"></div>
        </Transition>

      </div>
    </div>
  </div>

</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
import { renderer } from './Renderloop';
import { bluetooth, box, click, resetState, restoreOriginalPositions, split } from './Renderer_Camera';
import { model } from './scene/model';
import { watch } from 'vue';
import * as THREE from 'three';
const showbox = ref<boolean>(false);
const showfooter = ref<boolean>(true);
const showbluetooth = ref<boolean>(false);
const isProcessing = ref<boolean>(false); // 添加处理状态标志
onMounted(() => {
  document.body.appendChild(renderer.domElement);
});
const split1 = () => {
  init();
  resetState();
  split();
  click();
};
const back = () => {
  init();

};
const restore = () => {
  init();
  resetState();
  console.log(box.value)
  restoreOriginalPositions();
};

watch(
  [() => box.value, () => bluetooth.value],
  ([BoxVal, BluetoothVal]) => {
    if (isProcessing.value) return;
    
    // 设置处理标志
    isProcessing.value = true;
    
    // 重置所有显示状态
    showbox.value = false;
    showbluetooth.value = false;
    if (BoxVal) {
      showbluetooth.value = false;
      showOnly(['电池001', '电池']); // 显示电池相关模型
      setTimeout(() => {
        showbox.value = true;
        bluetooth.value = false;
      }, 200);
    }
    if (BluetoothVal) {
      showbox.value = false;
      showOnly(['Box004', 'xinpian']); // 显示芯片相关模型
      setTimeout(() => {
        showbluetooth.value = true;
        box.value = false;
      }, 200);
    }
    isProcessing.value = false;
  },
  { immediate: true, deep: true }
);
function showOnly(names: string[]) {
  model.traverse((child) => {
    if (child instanceof THREE.Mesh) {
      if (names.includes(child.name)) {
        child.visible = true;
      } else {
        child.visible = false;
      }
    }
  });
}
function init() {
  model.traverse((child) => {
    child.visible = true;
  });
  showbox.value = false;
  showbluetooth.value = false;
  box.value = false;
  bluetooth.value = false;
}</script>

<style scoped>
.canvas-container {
  position: relative;
  width: auto;
  height: auto;
  overflow: hidden;
}

.aside {
  display: flex;
  position: fixed;
  top: 30%;
  flex-direction: column;
  right: 0px;
  background-image: url('/jpg/按钮1/矩形 2 拷贝.png');
  background-size: cover;
  background-position: center;
  background-color: transparent;
  border-radius: 30px;
}

.aside button {
  width: 150px;
  height: 150px;
  margin: 10px;

}

.spilit1-button {
  background-image: url('/jpg/按钮1/可视.png');
  background-size: cover;
  background-position: center;
  background-color: transparent;
}

.restore-button {
  background-image: url('/jpg/按钮1/缩放.png');
  background-size: cover;
  background-position: center;
  background-color: transparent;
}
.back-button{
  background-image: url('/jpg/按钮1/撤销.png');
  background-size: cover;
  background-position: center;
  background-color: transparent;
}

.footer {
  display: flex;
  position: fixed;
  width: 1300px;
  height: 320px;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  border-radius: 20px;
}

.footer-container {
  display: flex;
  width: 100%;
  height: 100%;
  background-image: url('/jpg/弹窗/1.png');
  background-size: cover;
  background-position: center;
}

.BoxVisible {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('/jpg/弹窗/2.png');
  background-size: cover;
  background-position: center;
}

.bluetoothVisible {
  display: flex;
  position: absolute;
  width: 100%;
  height: 100%;
  background-image: url('/jpg/弹窗/3.png');
  background-size: cover;
  background-position: center;
}
</style>